<template>

    <div class="login_container">
        <el-row>
            <!-- 栅格为24,12表示占1半，设备屏幕小于等于768时，这时左边的结构就隐藏 -->
            <el-col :span="12" :xs="0"></el-col>
            <el-col :span="12" :xs="24">
                <el-form class="login_form" ref="loginFormRef" :model="loginForm">
                    <h1>Hello</h1>
                    <h2>欢迎来到麻雀虽小五脏俱全系统</h2>
                    <div style="padding:0 40px;">
                        <el-form-item prop="username"
                            :rules="[{ required: true,min:5,max:10, message: '用户名最少为5位', trigger: 'change' }]">
                            <el-input :prefix-icon="User" v-model="loginForm.username"></el-input>
                        </el-form-item>
                        <el-form-item prop="password"
                            :rules="[{ required: true,min:6,max:10,  message: '密码不能为空', trigger: 'change' }]">
                            <el-input :prefix-icon="Lock" v-model="loginForm.password" show-password></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button class="login_button" type="primary" @click="handleLogin">登录</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </el-col>
        </el-row>
    </div>

</template>
<script setup lang="ts">
    import { User, Lock } from '@element-plus/icons-vue'
    // 收集登录系统的用户名密码
    import { reactive, ref, onMounted, } from 'vue'
    import { reqLogin } from '@/api/user/index.ts'
    import { ElNotification } from 'element-plus'

    import userInfoStore from "@/store/modules/user.ts";

    import { getTime } from '@/utils/time.ts'
    //获取el-form组件
    let loginFormRef = ref()
    //使用小仓库
    let useStore = userInfoStore()
    import { useRouter, useRoute } from 'vue-router'
    let $route = useRoute()
    let $router = useRouter()

    let loginForm = reactive({ username: 'admin', password: '111111' })

    //登录点击后通知仓库发请求
    //成功需要跳转页面
    //失败要提示错误信息
    const handleLogin = async () => {
        // 如果Promise被拒绝（rejected），那么await会抛出一个异常，并且之后的代码将不会执行
        await loginFormRef.value.validate()

        try {
            await useStore.reqLogin(loginForm);
            //判断登录的时候,路由路径当中是台有query容数，如果有就往query参数挑战，没有跳转到首贝
            let redirect = $route.query.redirect

console.log(redirect);
            $router.push({ path: redirect || '/' })
  
            ElNotification({
                type: 'success',
                // getTime会是工具函数=后面的所有
                title: `Hello,${getTime()}好`,
                message: '欢迎回来'
            })

        } catch (error) {
            //根据仓库错误返回的错误对象，来打印错误信息
            console.log(error);
            console.log(error.stack);
            alert(error.message)
        }
    }
</script>
<style lang="scss" scoped>
    .login_container {
        width: 100vw;
        height: 100vh;
        background: url('@/assets/images/background.jpg') no-repeat;
        background-size: cover;

        .login_form {
            color: aliceblue;
            position: relative;
            top: 40vh;
            width: 80%;
            background: url('@/assets/images/login_form.png') no-repeat;
            background-size: cover;
            padding: 30px;

            h1 {
                margin-bottom: 10px;
                font-size: 48px;
            }

            h2 {
                margin-bottom: 20px;
                font-size: 20px;
            }

            .login_button {
                width: 100%;
            }
        }
    }
</style>